<template>
  <div class="app-container">
    <el-form ref="management" :inline="true" size="small" style="display:flex;justify-content: space-between">
      <el-form-item>
        <el-input placeholder="请输入内容"  v-model="queryParams.sername"  >
          <el-button slot="append" icon="el-icon-search" @click="getlist"></el-button>
          <el-button slot="append" type="primary" icon="el-icon-refresh" round
                     @click="selectlist"></el-button>
        </el-input>


      </el-form-item>
      <el-form-item>
        <el-button style="background:linear-gradient(to right, #2b789c, #0bbb80);color:white;border:none"
                   icon="el-icon-plus" @click="handleAdd">新增名单</el-button>
      </el-form-item>


    </el-form>
    <el-table :data="subData">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" align="center" prop="id" width="170" />
      <el-table-column label="IP地址" align="center" prop="ip" width="350" />
      <el-table-column label="更新时间" align="center" prop="time" width="250" >
        <template slot-scope="scope">
          {{ renderTime(scope.row.time) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" style="background-color:#23c79e;color:white;border:none" icon="el-icon-view"
                     @click="handleClick(scope.row)">
          </el-button>
          <!-- <el-button size="mini" @click="handleUpdate(scope.row, scope.$index)" icon="el-icon-edit"
              style="background-color:rgb(42, 62, 104);color:white;border:none"></el-button> -->
          <!-- <el-button size="mini" icon="el-icon-s-claim" type="text"
              @click="audit(scope.row,scope.$index )">审核</el-button> -->
          <el-button size="mini" icon="el-icon-delete" @click="handleDelete(scope.$index)"
                     style="background-color:#b60000;color:white;border:none" type="danger"></el-button>

        </template>
      </el-table-column>

    </el-table>
    <el-row>
      <el-col style="text-align:right">
        <pagination

          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getlist"
        />

      </el-col>
    </el-row>
    <el-dialog :title="addTitle" :visible.sync="Open" width="500px" append-to-body>
      <el-form ref="addForm" :model="addForm" label-width="130px">
        <el-form-item label="IP地址" prop="Address">
          <el-input v-model="addForm.ip" placeholder="请输入IP地址" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addfrom">确 定</el-button>
        <el-button @click="cancelAdd">取 消</el-button>
      </div>

    </el-dialog>
    <el-dialog :title="detailTitle" :visible.sync="ClickOpen" append-to-body>
      <el-descriptions ref="" direction="vertical" :column="2" border>
        <el-descriptions-item label="用户ID" label-class-name="my-label">{{ ClickList.id
          }}</el-descriptions-item>
        <!-- <el-descriptions-item label="状态">{{ ClickList.State }}</el-descriptions-item> -->
        <el-descriptions-item label="IP地址">{{ ClickList.ip}}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ ClickList.time}}
        </el-descriptions-item>

      </el-descriptions>
    </el-dialog>

  </div>
</template>

<script>
import { getblackList,selectBlackFn,addblackFn,deleteBlackFn } from '@/api/blacklist'
// import {getBlackList} from '@/api/blacklist'
export default {
  data() {
    return {
      Open: false,
      total: 2,

      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sername:null
      },
      detailTitle: '详情',
      UpdateOpen: false,
      modifyTitle: '修改',
      ClickOpen: false,
      addTitle: '新增订阅',
      sername: '',
      auditOpen: false,
      auditTitle: '审核',
      addForm: {

      },
      modifyForm: {
        UserID: '',
        Institution: '',
        State: '',
        Address: '',
        Service: '',
        // StateList: [
        //     {
        //         value: '1',
        //         label: '已订阅'
        //     },
        //     {
        //         value: '2',
        //         label: '未订阅'
        //     }

        // ]

      },
      auditForm: {
        Id: '',
        User: '',
        Name: '',
        Encoded: '',
        Address: '',
        Time: '',
        State: '',

      },


      subData: [

      ],
      ClickList: {
        UserID: '',
        Institution: '',
        State: '',
        Address: '',
        Service: '',
      }

    }
  },
  methods: {
    renderTime(date) {
      var dateee = new Date(date).toJSON();
      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
    audit(row) {
      console.log(row);
      this.auditOpen = true;
      this.auditForm = row;

    },
    getlist() {
      getblackList(this.queryParams).then(res => {
        this.subData = res.rows;
        this.total = res.total;
        console.log(this.subData);
      })
    },

    // auditSuccess() {
    //     this.auditOpen = false;
    //     this.subData[this.subData.indexOf(this.auditForm)].State = '已审核';
    // },
    // auditFail() {
    //     this.auditOpen = false;
    //     this.subData[this.subData.indexOf(this.auditForm)].State = '未审核';
    // },
    handleAdd() {
      this.Open = true;
      this.addForm={};
    },


    handleDelete(idx) {
      console.log(idx);
      deleteBlackFn(this.subData[idx].id).then(res => {
        this.getlist();
      })

    },

    handleClick(row) {
      console.log(row);
      this.ClickOpen = true;
      this.ClickList = row;
      // this.ClickList.State = row.State;

    },
    handleUpdate(row, idx) {
      this.UpdateOpen = true;
      console.log(row);
      this.modifyForm = row;
      this.userIndex = idx;

    },
    selectlist(){
      console.log(this.sername);
      this.queryParams.sername=null
      this.getlist()

    },
    cancelAdd() {
      this.Open = false;
    },
    cancel() {
      this.UpdateOpen = false;

    },
    confirm() {
      this.UpdateOpen = false;
      this.subData[this.userIndex] = this.modifyForm;
    },
    addfrom() {
      addblackFn(this.addForm).then(res => {
        this.getlist();
      })

      this.Open = false;

    },
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }

    // handleSizeChange(val) {
    //     console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange(val) {
    //     console.log(`当前页: ${val}`);
    // },
    // handleSizeChange(size) {
    //     //修改当前每页的数据行数
    //     this.pagesize = size;
    //     //数据重新分页
    //     this.getPageInfo();
    // },
    // handleCurrentChange(pageNumber) {
    //     //修改当前的页码
    //     this.currentpage = pageNumber;
    //     //数据重新分页
    //     this.getPageInfo()
    // },
    // getPageInfo() {
    //     //清空pageTicket中的数据
    //     this.subData = [];
    //     // 获取当前页的数据
    //     for (let i = (this.currentpage - 1) * this.pagesize; i < this.total; i++) {
    //         //把遍历的数据添加到pageTicket里面
    //         this.subData.push(this.ticket[i]);
    //         //判断是否达到一页的要求
    //         if (this.subData.length === this.pagesize) break;
    //     }
    // },

  },
  created(){
    this.getlist();
  }


}
</script>

<style scoped>
.el-input {
  width: 430px;
}

/* .my-label {
    background-color: #a4cff7;
} */
.audit {
  margin-left: 40%;


}

.auditFail {
  margin-left: 5%;


}

::v-deep .el-descriptions__body {
  font-size: 16px;
  /* margin-left: 10%; */
  margin-left: 0;


}
</style>
